<template>
  <div ref="editorRef" class="editor-main"></div>
</template>

<script lang="ts" setup>
import { basicSetup, EditorView } from "codemirror";
import { EditorState } from "@codemirror/state";
import { javascript } from "@codemirror/lang-javascript";
import { onMounted, ref } from "vue";

const editorRef = ref();

const editorView = ref();

const initEditor = () => {
  if (typeof editorView.value !== "undefined") {
    editorView.value.destroy();
  }

  const jsonString = `{

   root: true,

   extends: [

    "plugin:vue/vue3-essential",

    "eslint:recommended",

    "@vue/eslint-config-typescript",

    "@vue/eslint-config-prettier",

    "vue-global-api"

   ],

   parserOptions: {

    ecmaVersion: "latest",

   },

   rules: {

    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",

    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",

    endOfLine: "auto",

    "prettier/prettier": ["error", { "endOfLine": "auto" }]

   },

  }`;

  const startState = EditorState.create({
    doc: jsonString,
    extensions: [basicSetup, javascript()]
  });
  if (editorRef.value) {
    editorView.value = new EditorView({
      state: startState,
      parent: editorRef.value
    });
  }
};
// onMounted生命周期可以保证读取到dom元素
onMounted(() => {
  initEditor();
});
</script>

<style lang="scss" scoped>
.editor-main {
  width: 100vw;

  height: 100vh;
}
</style>
